<template>
  <div class="common-layout">
    <el-container style="height: 100vh">
      <el-aside width="200px">
        <el-menu
            style="height: 100%"
            class="el-menu-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :default-active="$route.path"
            router
        >
          <el-menu-item  v-for="item in navList" :key="i" :index="item.name">{{ item.navItem }}</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      navList: [
        { name: "/account/customNodes", navItem: "自定义节点" },
        { name: "/account/xmindTest", navItem: "Xmind测试" },
        { name: "/account/echartsTest", navItem: "echarts测试" },
        { name: "/account/dynamicForms", navItem: "动态表单" },
        { name: "/account/exportHtml", navItem: "导出HTML" },
        { name: "/account/gridLayout", navItem: "网格布局" },
        { name: "/account/openLayers", navItem: "gis地图" },
        { name: "/account/filePreview", navItem: "文件预览" },
        { name: "/account/draggableBox", navItem: "上下拖拽" },
        { name: "/account/signatureDiv", navItem: "签名画板" },
      ]
    }
  },
}
</script>

<style scoped>
.common-layout{
  height: 100%;
}
::v-deep(.el-main){
  padding: 0;
}
::v-deep(.el-menu-item){
  height: 45px;
  line-height: 45px;
}
</style>
